<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>魏远商城购物车</title>
		<link rel="stylesheet" type="text/css" href="../../css/cart/cart.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common/public.css" />
	</head>

	<body>
		<!--头部-->
		<div class="top_all">
		<div class="top">
			<div class="top_con">
				<div class="tlogin"></div>
				<div class="gotoregister" style="display: none;">免费注册</div>
				<div class="homepage">商城首页</div>
				<div class="tmyorder">我的订单<img src="../../image/turn_down.png"></div>						
				<div class="home_car"><img src="../../image/shop_car.png">购物车<span class="car_time">0</span></div>
				<div class="line_ke">联系客服<img src="../../image/turn_down.png"></div>							
			</div>		
		</div>
		<div class="loged" style="display: none;">
			<div><span class="guanli">账号管理</span>|<span class="out">退出</span></div>
			<div class="thead">
				<div class="thead_pic"><span></span></div>
				<div class="tmenber">企业会员</div>
			</div>
		</div>
		<div class="myorder">
			<span class="order_1">待支付</span>
			<span class="order_2">待发货</span>
			<span class="order_3">待收货</span>
			<span class="order_4">待评价</span>
		</div>
		<div class="tcont">
			<span class="mine1">用户帮助</span>
			<span class="mine2">联系客服</span>
			<span class="mine3">投诉建议</span>
			<span class="mine4">退换货</span>
			<span class="mine5">收货地址管理</span>
		</div>
		
		<div class="logeandsear">
			<div class="imageLogo"><img src="../../image/Logo.png"></div>
			<div class="search">
				<div>
					<img class="search-icon" src="../../image/search-icon.png"><input type="text" class="home_searchto" placeholder="魏远产品搜索" /><span class="gotosearch">搜索</span><span class="searchtips">X请输入您要搜索的内容</span>
				</div>
			</div>
	    </div>
	</div>	
	<div class="right">
			<div class="right_car"><span><img src="../../image/righr_car.png"></br>购</br>物</br>车</span></div>
		<div class="youhuiquan"><span>优</br>惠</br>券</span></div>
		<div class="qianbao"><span>钱</br>包</span></div>
		<div class="qiyeshangc"><span>企</br>业</br>商</br>城</span></div>
		<div class="totop"><span><br/>^<br/>TOP</span></div>
	</div>
		<!--顶部代码-->
	<!--<div class="top_all">
		<div class="top">
			<div class="top_con">
				<div class="tlogin">登录</div>
				<div>免费注册</div>
				<div class="tmyorder">我的订单<img src="../../image/turn_down.png"></div>						
				<div><img src="../../image/shop_car.png">购物车<span class="car_time">0</span><img src="../../image/turn_down.png"></div>
				<div class="line_ke">联系客服<img src="../../image/turn_down.png"></div>							
			</div>		
		</div>
		<div class="loged" style="display: none;">
			<div><span class="guanli">账号管理</span>|<span class="out">退出</span></div>
			<div class="thead">
				<div class="thead_pic"><span></span></div>
				<div class="tmenber">企业会员</div>
			</div>
		</div>
		<div class="myorder">
			<span>待支付</span>
			<span>待发货</span>
			<span>待收货</span>
			<span>待评价</span>
		</div>
		<div class="tcont">
			<span>用户帮助</span>
			<span>联系客服</span>
			<span>投诉建议</span>
			<span>退换货</span>
			<span>收货地址管理</span>
		</div>
		
		<div class="logeandsear">
			<div><img src="../../image/Logo.png"></div>
			<div class="search">
				<div>
					<img class="search-icon" src="../../image/search-icon.png"><input type="text" placeholder="魏远产品搜索" /><span class="gotosearch">搜索</span>					
				</div>
			</div>
	    </div>
	</div>	-->
		<!--右边-->
		<!--右侧代码-->
	<!--<div class="right">
			<div class="right_car"><img src="../../image/righr_car.png"></br>购</br>物</br>车</div>
			<div>优</br>惠</br>券</div>
			<div>钱</br>包</div>
			<div>企</br>业</br>商</br>城</div>
			<div class="totop">——<br/>^<br/>TOP</div>
	</div>
	-->
	<div class="wrap">
		
	</div>
		<!--中间-->
		<div class="main-cart">
			<!--空值-->
			<div class="car-k1">
				<div class="car-k">
					<div><img src="../../image/cart.png"/></div>
					<div><span>购物车里没有商品~感紧去逛逛吧~</span><span id="homeCart">去逛逛></span></div>
				</div>
			</div>
			<!--非空-->
			<div class="car-fk1">
				<div class="car-fk">
					<div class="car-fk-t">
						<span>
							<span class="select-all"><img src="../../image/cart-select2.png"/></span>
						<span>全选</span>
						</span>
						<span>商品详情</span>
						<span>单元（元）</span>
						<span>数量</span>
						<span>金额（元）</span>
						<span>操作</span>
					</div>
					<div class="car-fk-m">
						<!--<div class="car-fk-l">
							<span class="select-cart"><img src="../../image/cart-select2.png"/></span>
							<span style="background-image: url(../../image/bottom.png);"></span>
							<span class="car-fk-r">
								<div class="car-fk-r1" id="11111+id">
									<span>
										<span>
											6支组合 包邮 美国进口汽水饮料Coca可口可乐组合
										</span>
										<span class="goods">
														2
													</span>
									</span>
									<span class="X联系方式不能为空1">￥<span>10.00</span></span>
									<span>
										<form>
											<input class="car-input1 top-but" type=button value="-">
											<input class="car-input2 top-m-input" type=text name=amount value=2>
											<input class="car-input3 top-but1" type=button value="+">
										</form>
									</span>
							<span class="car-input-amount">￥<span>10.00</span></span>
							<span class="cart-delect">删除</span>
						</div>
						<div>
							<span>类型：</span>
							<span>红色红色红色红色红色红色罐装</span>
						</div>
						</span>
					</div>
					<div class="car-fk-l">
							<span class="select-cart"><img src="../../image/cart-select2.png"/></span>
							<span style="background-image: url(../../image/bottom.png);"></span>
							<span class="car-fk-r">
								<div class="car-fk-r1" id="22222+id">
									<span>
										<span>
											6支组合 包邮 美国进口汽水饮料Coca可口可乐组合
										</span>
										<span class="goods">
														3
													</span>
									</span>
									<span class="car-input-amount1">￥<span>10.00</span></span>
									<span>
										<form>
											<input class="car-input1 top-but" type=button value="-">
											<input class="car-input2 top-m-input" type=text name=amount value=2>
											<input class="car-input3 top-but1" type=button value="+">
										</form>
									</span>
									<span class="car-input-amount">￥<span>10.00</span></span>
									<span class="cart-delect">删除</span>
								</div>
						<div>
							<span>类型：</span>
							<span>白白</span>
						</div>
						</span>
					</div>
					<div class="car-fk-l">
							<span class="select-cart"><img src="../../image/cart-select2.png"/></span>
							<span style="background-image: url(../../image/bottom.png);"></span>
							<span class="car-fk-r">
								<div class="car-fk-r1" id="3333+id">
									<span>
										<span>
											6支组合 包邮 美国进口汽水饮料Coca可口可乐组合
										</span>
										<span class="goods">
														3
													</span>
									</span>
									<span class="car-input-amount1">￥<span>10.00</span></span>
									<span>
										<form>
											<input class="car-input1 top-but" type=button value="-">
											<input class="car-input2 top-m-input" type=text name=amount value=2>
											<input class="car-input3 top-but1" type=button value="+">
										</form>
									</span>
									<span class="car-input-amount">￥<span>10.00</span></span>
									<span class="cart-delect">删除</span>
								</div>
						<div>
							<span>类型：</span>
							<span>白白</span>
						</div>
						</span>
					</div>-->
		</div>
		<div class="car-fk-f">
			<span>合计：</span>
			<span class="amount-all">0.00元</span>
			<span class="amount-balance">结算</span>
		</div>
		<div class="car-fk-f2">请选择商品！</div>
		</div>
		</div>
		</div>
		<!--删除-->
		<div class="delete">
		</div>
		<div class="delete1">
			<div><span>删除</span><span class="delete1-i"><img src="../../image/delect.png"/></span></div>
			<div><img src="../../image/cart-warn.png" />删除该订单？</div>
			<div><span class="delete1-y">确定</span><span></span><span class="delete1-n">取消</span></div>
		</div>
		<!--尾部-->
		<!--底部代码-->
    <div>
		<div class="wrap_bottom"><img src="../../image/bottom.png"></div>
	</div>
	</body>
	<script src="../../assets/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/url.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			//			接口对接
			//			获取购物车信息
			
			getinfor();
			function getinfor() {
				$.ajax({
					url: ur + '/mobilemember/shoppingcart/listshoppingcart',
					type: 'POST',
					headers: {
						"X-Token": localStorage.wyshoptoken
					},
					dataType: 'json',
					data: '',
					success: function(data) {
						console.log(JSON.stringify(data) + '信息')
						if(data.result.meta.code == 200) {
							$('.car-fk1').css('display','block');
							var times = data.result.data.length;
							for(var i = 0; i < times; i++) {
								var b = data.result.data[i].skuProductVO.productVO.mainImg
								//								console.log(b.indexOf(',') + '逗号索引值');
								var m = b.indexOf(',');
								if(m != '-1') {
									var mainImg = b.substring(0, m);
								} else {
									mainImg = b;
								}
								var ifNull = data.result.data[i].skuProductVO.propValueVOs == null ? '' : data.result.data[i].skuProductVO.propValueVOs;
								var priceAll = data.result.data[i].skuProductVO.newPrice*data.result.data[i].number;
								var jowlogo = data.result.data[i].skuProductVO.productVO.jdProductId != null && data.result.data[i].skuProductVO.productVO.jdProductId != '' ? 'jd' : 'wy';
								var div=$('<div class="car-fk-l" jowlogo="'+jowlogo+'" proid=' + data.result.data[i].productId + ' zrpo="' + data.result.data[i].comSkuIds + '" enterP="' + data.result.data[i].enterProductId + '">' +
//									'<div class="car-fk-l" >'+
											'<span class="select-cart"><img src="../../image/cart-select2.png"/></span>'+
											'<span style="background-image: url('+picur +mainImg+');"></span>'+
											'<span class="car-fk-r">'+
												'<div class="car-fk-r1" id="'+data.result.data[i].skuProductVO.id+'">'+//商品库存id的集合
													'<span>'+
														'<span>'+data.result.data[i].skuProductVO.productVO.longname+'</span>'+
													'<span class="goods">'+data.result.data[i].skuProductVO.enableNum+'</span>'+
													'</span>'+
													'<span class="car-input-amount1">￥<span>'+data.result.data[i].skuProductVO.newPrice.toFixed(2)+'</span></span>'+
													'<span>'+
														'<form>'+
															'<input class="car-input1 top-but" type=button value="-">'+
															'<input class="car-input2 top-m-input" type=text name=amount value='+data.result.data[i].number+'>'+
															'<input class="car-input3 top-but1" type=button value="+">'+
														'</form>'+
													'</span>'+
											'<span class="car-input-amount">￥<span>'+priceAll.toFixed(2)+'</span></span>'+
											'<span class="cart-delect" >删除</span>'+
										'</div>'+
										'<div>'+
				//							'<span>类型：</span>'+
											'<span>'+ifNull+'</span>'+
										'</div>'+
										'</span>'+
									'</div>'
								);
								$('.car-fk-m').append(div);
							}
							
							all();//事件调用
						} else if(data.result.meta.code == 201) {
							//购物车为空
							$('.car-k1').css('display','block')
						} else if(data.result.meta.code == 303) {
							//未登录
							$('.car-k1').css('display','block')
						}
					},
					error: function(error) {
						console.log(JSON.stringify(error) + '错误')
					}
				})
			}
			all()
		function all(){
			
	//			合计
			$('.amount-balance').click(function() {
				if($('.amount-all').text() == '0.00元') {
					$('.car-fk-f2').css('display', 'block');
//					alert('请选择商品')
				} else {
					calc()
					$('.car-fk-f2').css('display', 'none');
//					传值
					console.log($('.car-fk-m>div').length);
					var start = '';//商品库存id的集合
					var start2 = '';//数量集合
					var start3 = '';//单价集合
					var start4 = '';//商品id的集合
					var start5 = '';//组合商品的库存编号
                    var start6= '';//	企业商品编号
                    var arrjid = '';
					for(var i = 0; i < $('.car-fk-m>div').length; i++) {
						if($('.car-fk-m>div').eq(i).hasClass('act')) {
							var idd = $('.car-fk-m>div').eq(i).find('.car-fk-r1').attr('id');
							start = start + idd + ',';
							var how = $('.car-fk-m>div').eq(i).find('.car-input2').val();
							start2 = start2 + how + ',';
							var price = $('.car-fk-m>div').eq(i).find('.car-input-amount1>span').text();
							start3 = start3 + price + ',';
							var proid = $('.car-fk-m>div').eq(i).attr('proid');
							start4 = start4 + proid + ',';
                            var zproid = $('.car-fk-m>div').eq(i).attr('zrpo');                                                      
 							start5 = start5 + zproid + ',';
   							var enterP = $('.car-fk-m>div').eq(i).attr('enterP');
 							start6 = start6 + enterP + ',';
 							var jowylogo = $('.car-fk-m>div').eq(i).attr('jowlogo');
 							if(arrjid==''){
									arrjid = jowylogo;
								}else if(arrjid !=''){
									if(arrjid==jowylogo){
										arrjid = jowylogo;
									}else{
										alert('不能同时加入京东商品和魏远商品');
										return false
									}
								}
						}
						sta = start.substring(0, start.length - 1);
						sta2 = start2.substring(0, start2.length - 1);
						sta3 = start3.substring(0, start3.length - 1);
						sta4 = start4.substring(0, start4.length - 1);
						sta5 = start5.substring(0, start5.length - 1);
						sta6 = start6.substring(0, start6.length - 1);
					}
					localStorage.skid = sta;
					localStorage.how = sta2;
					localStorage.pricejh = sta3;
					localStorage.proid = sta4;
                    localStorage.zhproid = sta5;
                    localStorage.enterP = sta6;
                    console.log(localStorage.skid+'++'+localStorage.how+'++'+localStorage.pricejh+"++"+
                    localStorage.proid+'++'+ localStorage.zhproid+'++'+localStorage.enterP
                    )
//					打开窗口
					window.location.href="logistics.html";//提交订单跳转接口
				}
				//				结束
			})
			//计算价格
			function calc() {
				
				var obj = $(".act .car-input-amount").text().split('￥');
				if(obj != '') {
					var sum = 0;
					for(var i = 1; i < obj.length; i++) {
						var sum1 = parseFloat(obj[i]);
						sum += sum1;
						console.log(sum.toFixed(2) + '总计')
					}
					$('.amount-all').html(sum.toFixed(2) + '元');
				}else{
					$('.amount-all').html('0.00元');
				}
				//				结束
			};
			//			选择
			var sel = true;
			$('.select-cart').click(function() {
				$('.car-fk-f2').css('display', 'none');
				if(sel) {
					$(this).children().attr('src', '../../image/cart-select1.png');
					$(this).parent('.car-fk-l').css('background-color', '#FFF2CC');
					$(this).parent('.car-fk-l').addClass('act')
					$(this).parent('.car-fk-l').find('.car-input2').css('background-color', '#FFF2CC');
					sel = false;
					var all = $(this).parent('.car-fk-l').find('.car-input-amount>span').text();
					calc();
				} else {
					$(this).children().attr('src', '../../image/cart-select2.png');
					$(this).parent('.car-fk-l').css('background-color', '#F6F7F8');
					$(this).parent('.car-fk-l').removeClass('act')
					$(this).parent('.car-fk-l').find('.car-input2').css('background-color', '#F6F7F8');
					sel = true;
					calc();
				}
				//         		 判断全选
				var a = $(this).parent().parent().find('.act').length;
				var b = $(this).parent().parent().find('.car-fk-l').length;
				if(a == b) {
					$('.select-all img').attr('src', '../../image/cart-select1.png');
				} else {
					$('.select-all img').attr('src', '../../image/cart-select2.png');
				}
				//				判断全选结束
				if(a == 0) {
					$('.amount-all').text('0.00元');
				}
				//				结束
			})
			$('.select-all').click(function() {
				$('.car-fk-f2').css('display', 'none');
				if(sel) {
					$(this).children().attr('src', '../../image/cart-select1.png')
					$('.select-cart').children().attr('src', '../../image/cart-select1.png');
					$('.car-fk-l').css('background-color', '#FFF2CC');
					$('.car-fk-l').addClass('act')
					$('.car-input2').css('background-color', '#FFF2CC');
					sel = false;
					calc();
				} else {
					$(this).children().attr('src', '../../image/cart-select2.png')
					$('.select-cart').children().attr('src', '../../image/cart-select2.png');
					$('.car-fk-l').css('background-color', '#F6F7F8');
					$('.car-fk-l').removeClass('act')
					$('.car-input2').css('background-color', '#F6F7F8');
					sel = true;
					$('.amount-all').html('0.00元')
				}
				//				结束
			})
			//金额
			//			加
			$('.car-input3').click(function() {
				//			库存
				$(this.form.amount.value++);
				var amount1 = this.form.amount.value;
				var amount2 = $(this.form).parent().prev().find('span').text();
				var amount = amount1 * amount2;
				console.log(amount.toFixed(2));
				$(this.form).parent().next().find('span').text(amount.toFixed(2));
//				calc();
				num1();
//				判断大于
				var kc=$(this.form).parent().siblings().find('.goods').text();
				var a=$(this.form).find('.car-input2').val();
				if(a > (parseFloat(kc))) {
					$(this).css('opacity', '0.5');
					$(this.form.amount).val(parseFloat(kc));
					$(this.form).parent().next().find('span').text((parseFloat(kc)*amount2).toFixed(2));
					return;
					calc();
				} else {
					calc();
					$(this).css('opacity', '1')
				}
			})
			//			减
			$('.car-input1').click(function() {
				$(this.form).find('.car-input3').css('opacity', '1');
				if(this.form.amount.value == 1) {} else {
					$(this.form.amount.value--);
					var amount1 = this.form.amount.value;
					var amount2 = $(this.form).parent().prev().find('span').text();
					var amount = amount1 * amount2;
					console.log(amount.toFixed(2));
					$(this.form).parent().next().find('span').text(amount.toFixed(2));
					calc();
					num1();
				}
			})

			function amount() {
				var amount1 = this.form.amount.value;
				var amount2 = $(this.form).parent().prev().find('span').text();
				var amount = amount1 * amount2;
				console.log(amount.toFixed(2));
				$(this.form).parent().next().find('span').text(amount.toFixed(2));
			}
			//				输入		
			$('.car-input2').keyup(function() {
				var amount3 = /^[0-9]*[1-9][0-9]*$/;
				if(!amount3.test($(this).val())) {
					$(this).val('1');
					var amount2 = $(this.form).parent().prev().find('span').text();
					$(this.form).parent().next().find('span').text(amount2)
					num1();
				} else {
					var amount1 = $(this).val();
					var amount2 = $(this.form).parent().prev().find('span').text();
					var amount = amount1 * amount2;
					$(this.form).parent().next().find('span').text(amount.toFixed(2));
					calc();
					num1();
				}
				var kucun = $(this.form).parent().prev().prev().find('.goods').text();
				var inp = $(this).val();
				if(inp> parseFloat(kucun)){
					$(this).val(kucun);
					var amount1 = $(this).val();
					var amount2 = $(this.form).parent().prev().find('span').text();
					var amount = amount1 * amount2;
					$(this.form).parent().next().find('span').text(amount.toFixed(2));
					calc()
				}
			})
			//		数量1的的判断
			num1()
			function num1() {
				var a = new Array;
				$('.car-fk-m .top-m-input').each(function(index, domEle) {
					a[index] = $('.top-m-input').eq(index).val();
					if(a[index] == 1) {
						$('.top-but').eq(index).css('opacity', '0.5')
					} else {
						$('.top-but').eq(index).css('opacity', '1')
					}
				});
			}
			//			删除
			$('#homeCart').click(function(){
				window.location.href="../home/home.html";
			})
			var ab = $('.car-fk-m').find('.car-fk-l').length;
			if(ab == 0){
				$('.car-fk1').css('display','none')
			}else{
				$('.car-fk1').css('display','block')
			}
			
			$('.cart-delect').click(function(even) {
				var scroll = document.body.scrollTop;
				var scroll1 = parseFloat(scroll) + 250;
				$('.delete1').css('top',scroll1 +'px');
				var thisid = $(this).parent().attr('id');
				del1();
				$(this).attr('class', 'remove');
				var a = $(this).parent().parent().parent().index();
				var b = $('.car-fk-m').find('.car-fk-l').length;
				$('.delete1-i').click(function() {
					del();
				})
				$('.delete1-n').click(function() {
					del();
				})
				$('.delete1-y').click(function() {
					del();
					$('.remove').parent().parent().parent().remove();
					if(b == 1) {
						$('.car-fk1').css('display','none');
						$('.car-k1').css('display','block')
					}
					delectCart();
				});
				//			删除接口
				function delectCart() {
					$.ajax({
						url: ur + '/mobilemember/shoppingcart/deleteshoppingcart',
						type: 'POST',
						headers: {
							"X-Token": localStorage.wyshoptoken
						},
						dataType: 'json',
						data: {
							"skuIds": thisid,//产品库存ID
						},
						success:function(data){
							console.log(JSON.stringify(data));
							if(data.result.meta.code == 200) {
								calc();
							}
						},
						error:function(error){
//							alert(error)
						}
					})
				}
			})
			//			封装
			function del1() {
				$('.delete').css('display', 'block')
				$('.delete1').css('display', 'block')
			}

			function del() {
				$('.delete').css('display', 'none');
				$('.delete1').css('display', 'none');
			}
}
		})
	</script>

</html>